window.onload = function () {
    // console.log(location);
    //  console.log(location.search);
    //  console.log(location.search.split("=")[1]);
    $(".ss").hide();
     var v = decodeURIComponent(location.search.split("=")[1]);
    //  console.log(v+"h");
    var words = document.getElementById("words")
    
     $("#input").val(v)
    //  console.log(v+"e")
     $(".container").html("");
     $(".ss").show();
     var c = $("#input").val();
    //  console.log(c+"l")

     var txt =document.createTextNode(c);
     words.appendChild(txt);

     var url = `search?keywords=${c}&type=10`;
     ajax({
         url,
         success: res => {
             handleData(res)
         }
     })



    $("#btn").click(function () {
        var input = document.getElementById("input")
    // console.log(input.value); 
        
        $(".container").html("");
        // var sousuo = document.getElementsByClassName("sousuo");
        $(".sousuo").show();

        var value =$("#input").value;
        // var value = input.value

        words.innerHTML = input.value;
       

        var url = `search?keywords=${input.value}&type=10`;
        ajax({
            url,
            success: res => {
                handleData(res)
            }
        })
        
    })

    function handleData(res) {
        var albums = res.result.albums
        albums.forEach(item => {
            var template = `
                    
                    <div class=""render>
                        <img src=${item.blurPicUrl}>
                        <a href="html/detail.html?id=${item.id}" class="title">${item.name}</a>
                        <p class="name">${item.artist.name}</p>
                    </div>
                `
            
            $(".container").append(template)
            
        })
    }
   
}

